<template>
  <!-- 图片部分 -->
  <div class="card-info">
    <div class="card-left">
      <div class="prise">
        0
      </div>
    </div>
    <div class="card-img">
      <van-image width="1.4rem" height="1.8rem" fit="cover"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
      <span class="number">#23433</span>
      <div class="name">Yellow God of Wealth</div>
    </div>
    <div class="card-right">
      <div class="prise">
        0
      </div>
      <el-tooltip content="Top center" placement="top">
        <span>111</span>
      </el-tooltip>
    </div>
  </div>
  <!-- 进度条 -->
  <div class="progress-bar">
    <div class="bot" v-for="(item, index) in 8" :key="index" :class="{ bot_active: index < 3 }"></div>
  </div>
  <div class="progress-bar">
    <div class="bot" v-for="(item, index) in 8" :key="index" :class="{ bot_active: index < 3 }"></div>
  </div>

  <div class="mintTime">
    <span>Mint Time:</span>
    <span>2020-01-01 11.11.11 (UTc+0)</span>
  </div>

  <div class="mintTime">
    <span>Mint Time:</span>
    <span>2020-01-01 11.11.11 (UTc+0)</span>
  </div>
  <div class="card-container">
    <div class="card-container-left">
      <div class="item-name">Mint Frome</div>
      <div class="item-img-content">
        <van-image width="0.6rem" height="0.8rem" fit="cover"  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
      </div>
    </div>
    <div class="card-container-right">
      <div class="item-name">Mint (3)</div>
      <div class="item-img-content">
        <van-image width="0.6rem" height="0.8rem" fit="cover" v-for="item in 10" class="image-margin"  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
      </div>
    </div>
  </div>
  <Title :title="'Description'">
    <div class="text-des">
      <p>
        黄财神在象进女中称为“占巴拉”，黄财神为着地各大教派尊奉的五色财神之一，黄财神在密宗教法中、属于财神也是护法神，五色财神之一。
      </p>
    </div>
  </Title>
  <Title :title="'Transaction History'">
    <div class="transation-item" v-for="item in 5">
      <div style="display: flex;align-items: center;">
        <div class="item-img">
          <van-image width="0.2rem" height="0.2rem" fit="cover"  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        </div>
        <div class="item-des1">
          <div>Name</div>
          <div>Hash</div>
        </div>
      </div>
      <div class="item-des2">
        <div>0.112<span>USDT</span></div>
        <div>time</div>
      </div>
    </div>
  </Title>
</template>

<script setup lang="ts">
import Title from './components/Title.vue';
</script>

<style scoped lang="less">
.card-info {
  display: flex;
  justify-content: space-between;
  height: 2.5rem;
  margin: 0.1rem;
  border: 1px solid #000;

  .card-left {
    .prise {
      width: 0.6rem;
      height: 0.20rem;
      border-radius: 0.1rem;
      background-color: beige;
    }
  }

  .card-img {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .number {
      width: 0.7rem;
      padding: 0.05rem;
      margin: 0.05rem;
      border-radius: 0.5rem;
      background-color: beige;
    }

    .name {}
  }

  .card-right {
    width: 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .prise {
      width: 0.6rem;
      height: 0.20rem;
      border-radius: 0.1rem;
      background-color: beige;
    }
  }
}

.progress-bar {
  display: flex;
  width: calc(100% - 0.2rem);
  margin: 0.2rem 0.1rem;
  border: 1px solid #000;
  border-radius: 0.1rem;
  box-sizing: border-box;

  .bot {
    flex: 1;
    height: 0.1rem;
    margin: 0rem 0.01rem;
    background-color: #D9D9D9;
    border-radius: 0.1rem;
  }

  .bot_active {
    background-color: #87F9B1;
  }

}

.mintTime {
  margin: 0rem 0.1rem 0.2rem 0.1rem;
  background-color: aliceblue;
  height: 0.5rem;
  border-radius: 0.25rem;
  line-height: 0.5rem;
  display: flex;
  justify-content: space-between;
  padding: 0rem 0.2rem;
}

.card-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #87F9B1;
  margin: 0.1rem;

  .card-container-left {
    width: 1rem;
  }

  .card-container-right {
    width: 2.3rem;

    .item-img-content {
      // display: flex; 
      overflow-x: auto;
      white-space: nowrap;

      .image-margin {
        margin: -0.05rem 0.05rem 0rem 0.05rem;
        padding-top: 0.05rem;
      }
    }
  }

  .item-name {
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;
  }
}
.text-des{
  padding: 0.01rem 0.1rem;
  text-align: justify;
}
.transation-item{
  background-color: aliceblue;
  height: 100%;
  border-radius: 0.5rem;
  margin: 0.1rem 0;
  height: 0.4rem;
  display: flex;
  padding: 0rem 0.1rem;
  justify-content: space-between;
  .item-des1{
    margin-left: 0.05rem;
  }
  .item-des2{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
  }
}

</style>